<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>写下心情 - 暖言树洞</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="page">
        <!-- Header -->
        <div class="page-header">
            <button class="header-back">
                <i class="fas fa-arrow-left"></i>
            </button>
            <h1 class="header-title">写下心情</h1>
            <button class="header-action" id="saveDraftBtn">
                <i class="fas fa-save"></i>
            </button>
        </div>

        <!-- Main Content -->
        <div class="page-content">
            <form id="postForm">
                <!-- Mood Selector -->
                <div class="card mb-6">
                    <h3 class="font-semibold mb-4 flex items-center">
                        <i class="fas fa-smile mr-2 text-primary"></i>
                        今天的心情
                    </h3>
                    <div class="grid grid-cols-5 gap-3">
                        <button type="button" class="mood-btn active" data-mood="😊">
                            <span class="text-2xl">😊</span>
                            <div class="text-xs mt-1">开心</div>
                        </button>
                        <button type="button" class="mood-btn" data-mood="😔">
                            <span class="text-2xl">😔</span>
                            <div class="text-xs mt-1">难过</div>
                        </button>
                        <button type="button" class="mood-btn" data-mood="😤">
                            <span class="text-2xl">😤</span>
                            <div class="text-xs mt-1">愤怒</div>
                        </button>
                        <button type="button" class="mood-btn" data-mood="😴">
                            <span class="text-2xl">😴</span>
                            <div class="text-xs mt-1">疲惫</div>
                        </button>
                        <button type="button" class="mood-btn" data-mood="🎉">
                            <span class="text-2xl">🎉</span>
                            <div class="text-xs mt-1">兴奋</div>
                        </button>
                        <button type="button" class="mood-btn" data-mood="😰">
                            <span class="text-2xl">😰</span>
                            <div class="text-xs mt-1">焦虑</div>
                        </button>
                        <button type="button" class="mood-btn" data-mood="🤔">
                            <span class="text-2xl">🤔</span>
                            <div class="text-xs mt-1">思考</div>
                        </button>
                        <button type="button" class="mood-btn" data-mood="💔">
                            <span class="text-2xl">💔</span>
                            <div class="text-xs mt-1">失落</div>
                        </button>
                        <button type="button" class="mood-btn" data-mood="🌟">
                            <span class="text-2xl">🌟</span>
                            <div class="text-xs mt-1">希望</div>
                        </button>
                        <button type="button" class="mood-btn" data-mood="😌">
                            <span class="text-2xl">😌</span>
                            <div class="text-xs mt-1">平静</div>
                        </button>
                    </div>
                </div>

                <!-- Title Input -->
                <div class="card mb-6">
                    <div class="input-group">
                        <label class="input-label">
                            <i class="fas fa-heading mr-1"></i>
                            给心情起个标题
                        </label>
                        <input 
                            type="text" 
                            id="titleInput"
                            class="input-field" 
                            placeholder="例如：今天的阳光很温暖..."
                            maxlength="50"
                        >
                        <div class="input-helper">简短的标题更容易被记住哦~</div>
                    </div>
                </div>

                <!-- Content Input -->
                <div class="card mb-6">
                    <div class="input-group">
                        <label class="input-label">
                            <i class="fas fa-pen mr-1"></i>
                            倾诉你的心情
                        </label>
                        <textarea 
                            id="contentTextarea"
                            class="input-field textarea-field" 
                            placeholder="在这里写下你想说的话...

AI猫猫会认真阅读每一个字，给你温暖的回复。你的心情会通过隐私计算技术安全地漂流给需要的人，传递温暖和力量。"
                            maxlength="500"
                        ></textarea>
                        <div class="flex justify-between items-center">
                            <div class="input-helper">真诚的表达更能传递温暖</div>
                            <div class="text-xs text-neutral-500" id="charCounter">0/500</div>
                        </div>
                    </div>
                </div>

                <!-- Privacy Settings -->
                <div class="card mb-6">
                    <h3 class="font-semibold mb-4 flex items-center">
                        <i class="fas fa-lock mr-2 text-primary"></i>
                        隐私设置
                    </h3>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <div class="font-medium text-sm">允许漂流</div>
                                <div class="text-xs text-neutral-500">让你的心情传递给其他用户</div>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" checked id="allowDrift">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        <div class="flex items-center justify-between">
                            <div>
                                <div class="font-medium text-sm">完全匿名</div>
                                <div class="text-xs text-neutral-500">不显示任何个人标识</div>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" checked id="fullAnonymous">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- AI Preview -->
                <div class="card mb-6 bg-primary-50">
                    <div class="flex items-start">
                        <div class="ai-cat mr-3">
                            🤖
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium mb-2 text-primary">AI猫猫说</h4>
                            <p class="text-sm text-neutral-700 leading-relaxed" id="aiPreview">
                                感谢你愿意分享内心的声音。每一份真诚的表达都值得被温柔对待，我会用心为你写一份暖心回复~
                            </p>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Bottom Actions -->
        <div class="page-footer p-4">
            <div class="flex gap-3">
                <button type="button" class="btn btn-outline flex-1" onclick="history.back()">
                    <i class="fas fa-times mr-2"></i>
                    取消
                </button>
                <button type="button" class="btn btn-primary flex-1" id="publishBtn">
                    <i class="fas fa-paper-plane mr-2"></i>
                    发布日记
                </button>
            </div>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // 心情选择器
        document.addEventListener('DOMContentLoaded', function() {
            const moodButtons = document.querySelectorAll('.mood-btn');
            const titleInput = document.getElementById('titleInput');
            const contentTextarea = document.getElementById('contentTextarea');
            const charCounter = document.getElementById('charCounter');
            const aiPreview = document.getElementById('aiPreview');
            const publishBtn = document.getElementById('publishBtn');
            const saveDraftBtn = document.getElementById('saveDraftBtn');

            let selectedMood = '😊';

            // 心情选择事件
            moodButtons.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有active状态
                    moodButtons.forEach(b => b.classList.remove('active'));
                    
                    // 添加当前按钮active状态
                    this.classList.add('active');
                    selectedMood = this.getAttribute('data-mood');
                    
                    // 更新AI预览
                    updateAIPreview();
                });
            });

            // 字数计数器
            contentTextarea.addEventListener('input', function() {
                const count = this.value.length;
                charCounter.textContent = `${count}/500`;
                
                if (count > 500) {
                    charCounter.style.color = 'var(--error-500)';
                    this.style.borderColor = 'var(--error-500)';
                } else {
                    charCounter.style.color = 'var(--neutral-500)';
                    this.style.borderColor = 'var(--neutral-300)';
                }
                
                updateAIPreview();
            });

            // 标题输入事件
            titleInput.addEventListener('input', updateAIPreview);

            // 更新AI预览
            function updateAIPreview() {
                const content = contentTextarea.value.trim();
                const title = titleInput.value.trim();
                
                if (content) {
                    // 根据内容和心情生成预览回复
                    const previews = {
                        '😊': '你的快乐很有感染力呢！继续保持这份美好的心情，也记得把快乐分享给身边的人~',
                        '😔': '我能感受到你的难过，这很正常。难过的时候记得给自己一些温柔，一切都会慢慢好起来的。',
                        '😤': '生气说明你在意，这是很正常的情绪。试试深呼吸，让心情慢慢平静下来吧。',
                        '😴': '你已经很努力了，记得适当休息。每个人都有疲惫的时候，给自己一些放松的时间。',
                        '🎉': '恭喜你！这份兴奋很珍贵，希望这份快乐能一直伴随着你。',
                        '😰': '焦虑的时候记住，你比想象中更坚强。一步一步来，不要给自己太大压力。',
                        '🤔': '思考是成长的开始，你的深度思考让我很佩服。相信你能找到答案的。',
                        '💔': '心碎的感觉我理解，给自己一些时间慢慢治愈。你值得被温柔对待。',
                        '🌟': '你心中的希望就像星光一样闪亮，继续向前走，美好的事情正在来的路上。',
                        '😌': '这份平静很珍贵，希望你能保持这种内心的安宁和从容。'
                    };
                    
                    aiPreview.textContent = previews[selectedMood] || previews['😊'];
                } else {
                    aiPreview.textContent = '感谢你愿意分享内心的声音。每一份真诚的表达都值得被温柔对待，我会用心为你写一份暖心回复~';
                }
            }

            // 发布按钮事件
            publishBtn.addEventListener('click', function() {
                const title = titleInput.value.trim();
                const content = contentTextarea.value.trim();
                
                if (!title) {
                    App.utils.showToast('请输入日记标题', 'warning');
                    titleInput.focus();
                    return;
                }
                
                if (!content) {
                    App.utils.showToast('请输入日记内容', 'warning');
                    contentTextarea.focus();
                    return;
                }
                
                if (content.length > 500) {
                    App.utils.showToast('内容不能超过500字', 'error');
                    contentTextarea.focus();
                    return;
                }
                
                // 禁用按钮，显示加载状态
                publishBtn.disabled = true;
                publishBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>发布中...';
                
                // 模拟提交过程
                setTimeout(() => {
                    const formData = {
                        title: title,
                        content: content,
                        mood: selectedMood
                    };
                    
                    // 提交数据
                    if (window.App) {
                        App.forms.submitDiary(formData);
                    }
                    
                    // 清空表单
                    titleInput.value = '';
                    contentTextarea.value = '';
                    charCounter.textContent = '0/500';
                    
                    // 跳转回首页
                    setTimeout(() => {
                        window.location.href = 'home.html';
                    }, 1500);
                }, 1000);
            });

            // 保存草稿
            saveDraftBtn.addEventListener('click', function() {
                const title = titleInput.value.trim();
                const content = contentTextarea.value.trim();
                
                if (title || content) {
                    // 保存到本地存储
                    localStorage.setItem('draftTitle', title);
                    localStorage.setItem('draftContent', content);
                    localStorage.setItem('draftMood', selectedMood);
                    
                    App.utils.showToast('草稿已保存', 'success');
                } else {
                    App.utils.showToast('没有内容可保存', 'info');
                }
            });

            // 加载草稿
            function loadDraft() {
                const draftTitle = localStorage.getItem('draftTitle');
                const draftContent = localStorage.getItem('draftContent');
                const draftMood = localStorage.getItem('draftMood');
                
                if (draftTitle) titleInput.value = draftTitle;
                if (draftContent) {
                    contentTextarea.value = draftContent;
                    charCounter.textContent = `${draftContent.length}/500`;
                }
                if (draftMood) {
                    selectedMood = draftMood;
                    moodButtons.forEach(btn => {
                        btn.classList.remove('active');
                        if (btn.getAttribute('data-mood') === draftMood) {
                            btn.classList.add('active');
                        }
                    });
                }
                
                updateAIPreview();
            }

            // 页面加载时尝试加载草稿
            loadDraft();
        });
    </script>

    <style>
        /* 心情按钮样式 */
        .mood-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-3);
            border: 2px solid var(--neutral-200);
            border-radius: var(--rounded-lg);
            background: white;
            transition: all var(--transition-normal);
            cursor: pointer;
            min-height: 70px;
        }

        .mood-btn:hover {
            border-color: var(--primary-300);
            background: var(--primary-50);
        }

        .mood-btn.active {
            border-color: var(--primary-500);
            background: var(--primary-50);
        }

        /* 切换开关样式 */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--neutral-300);
            transition: 0.3s;
            border-radius: 24px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }

        input:checked + .toggle-slider {
            background-color: var(--primary-500);
        }

        input:checked + .toggle-slider:before {
            transform: translateX(20px);
        }

        /* 网格布局 */
        .grid {
            display: grid;
        }

        .grid-cols-5 {
            grid-template-columns: repeat(5, 1fr);
        }

        .space-y-4 > * + * {
            margin-top: 1rem;
        }
    </style>
</body>
</html>
